<template>
  <div class="navBar">
    <Icon v-if="isShowLeftIcon" @click.native="$router.back()" class="back" :name="iconName"/>
    <span class="title">{{ navTitle }}</span>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';

@Component
export default class NavBar extends Vue {
  @Prop(Boolean) isShowLeftIcon!: boolean;
  @Prop(String) iconName!: string;
  @Prop(String) navTitle!: string;
}
</script>

<style lang="scss" scoped>
.navBar {
  font-size: 16px;
  text-align: center;
  line-height: 48px;
  padding: 0 16px;
  position: absolute;
  top: 0;
  background-color: white;
  margin-bottom: 8px;
  max-width: 500px;
  width: 100%;

  > .back {
    position: absolute;
    top: 16px;
    left: 16px;
  }

  > .title {

  }
}
</style>
